<!DOCTYPE html>
<html lang="en">
<head>
    <%--<meta charset="UTF-8">--%>
    <title>商家配送范围设置</title>
</head>


<body>

<style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
    #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
    #r-result{height:100%;width:20%;float:left;}
    .BMap_cpyCtrl,.anchorBL{display: none!important;}/*隐藏百度地图版权*/
</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=CDi7aPtKRINeTmLHfPK51sWI0jYEp611"></script>

<div id="allmap" style="width: 100%;height:90% "></div>
<div>
    经度
    <input id="longitude" type="input" readonly="readonly" style="width: 150px" value="${longitude}"/>
    纬度
    <input id="latitude" type="input"  readonly="readonly" style="width: 150px" value="${latitude}"/>
    位置
    <input id="location" type="input" style="width: 350px" value="${address}" />
    <input type="button" value="确定" onclick="save()"/>
</div>
<div>
    点击鼠标左键选择位置，滑动鼠标滑轮方法缩小地图,经纬度不可更改，可修改位置
</div>

<script type="text/javascript">
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(${longitude},${latitude});
    map.centerAndZoom(point,12);
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);               // 将标注添加到地图中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE);
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    //    var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮


    map.enableScrollWheelZoom(); //开启滚动缩放
    map.enableContinuousZoom(); //开启缩放平滑
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);

    //    map.addControl(top_right_navigation);
    //定位
    var geoc = new BMap.Geocoder();


    map.addEventListener("click", function(e){
        var pt = e.point;
        map.clearOverlays();
        var marker = new BMap.Marker(pt);  // 创建标注
        map.addOverlay(marker);               // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        geoc.getLocation(pt, function(rs){
            var addComp = rs.addressComponents;
            alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + ", " + e.point.lng + "," + e.point.lat );
//            document.getElementById("longitude").value=e.point.lng;
//            document.getElementById("latitude").value=e.point.lat;
//            document.getElementById("location").value=addComp.province + addComp.city+ addComp.district + addComp.street + addComp.streetNumber;
        });
    });
    function save() {
        var win=frameElement.api.opener;
        win.$("#coordinate").val(document.getElementById("longitude").value+","+document.getElementById("latitude").value);
        win.$("#address").val(document.getElementById("location").value);
        frameElement.api.close();
    }
</script>

</body>
</html>
